import './App.css';
import React from 'react';
import { Button, Toast, List, Picker, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';
import * as request from './request';

const Item = List.Item;
class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
        }
    }
    componentDidMount() {
    }
    onSubmit = () => {
        this.props.form.validateFields((error, value) => {
            this.setState({ loading: true });
            let _this = this;
            value.role = value.role[0];
            if (!error) {
                request.post("/api/services/app/Members/Regist", value).then((response) => {
                    if (response) {
                        if (response.success) {
                            Toast.info('注册成功');
                        }
                        else {
                            Toast.fail(response.error.message);
                        }
                        this.setState({ loading: false });
                    }
                });
            }
            else
                this.setState({ loading: false });
        });
    }
    render() {
        const { loading } = this.state;
        const { getFieldProps, getFieldError } = this.props.form;
        const roles = [
            {
                label: '父亲',
                value: '父亲',
            },
            {
                label: '母亲',
                value: '母亲',
            },
        ];
        return (
            <form>
                <List
                    renderFooter={() => getFieldError('role')}
                >
                    <InputItem
                        {...getFieldProps('loginName', {
                            rules: [
                                { required: true, message: '请输入用户名' },
                                { validator: this.validateAccount },
                            ],
                        })}
                        error={!!getFieldError('loginName')}
                        placeholder="6位字符字母或数字组合"
                    >用户名</InputItem>

                    <InputItem {...getFieldProps('password', {
                        rules: [
                            { required: true, message: '请输入密码' },
                        ],
                    })}
                        clear
                        error={!!getFieldError('password')}
                        placeholder="" type="password">
                        密码
                        </InputItem>
                    <InputItem
                        {...getFieldProps('mobile', {
                            rules: [
                                { required: true, message: 'Please input account' },
                            ],
                        })}
                        clear
                        error={!!getFieldError('mobile')}
                        placeholder="输入11位手机号"
                    >手机号</InputItem>
                    <Picker data={roles} cols={1} {...getFieldProps('role', {
                        rules: [
                            { required: true, message: '请选择角色' },
                        ],
                    })} className="forss">
                        <List.Item arrow="horizontal">角色</List.Item>
                    </Picker>
                    <InputItem {...getFieldProps('email')} placeholder="邮箱地址">
                        邮箱
                        </InputItem>
                    <InputItem {...getFieldProps('inviter')} placeholder="邀请人编号">
                        邀请人
                        </InputItem>
                    <Item>
                        <Button type="primary" onClick={this.onSubmit} loading={loading}>确定提交</Button>
                    </Item>
                </List>

            </form>
        )
    };
}

export default createForm()(LoginForm);

